<template>
    <div class="ant-dropdown-item">
      <a-dropdown>
        <span class="ant-dropdown-link">
          <a-avatar :src="avatar" size="large" />
          {{ username }}
          <DownOutlined />
        </span>
        <template v-slot:overlay>
          <a-menu>
            <a-menu-item @click="logout">退出登录</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { DownOutlined } from "@ant-design/icons-vue";
export default {
  name: "spavatar",
  components: { DownOutlined },
  computed: {
    ...mapGetters({
      username: "user/username",
      avatar: "user/avatar",
    }),
  },
  setup() {},
};
</script>
<style scoped>
.ant-dropdown-link {
  /* display: flex; */
  padding-top: 3vh;
  min-height: 120px;
  overflow: hidden;
}
.ant-dropdown-item {
  display: inline-flex;
  padding-top: 1vh;
  height: 100%;
  width: 15.5vw;
  box-shadow: 9px gray;
  background-color: gainsboro;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  align-self: center;
  justify-content: center;

}
</style>